import React, { PureComponent } from "react";
import s from './index.scss'
import {Flex} from 'antd-mobile'
// 引入 ECharts 主模块
import echarts from "echarts";
// import echarts from "echarts/lib/echarts";
// // 引入提示框和标题组件
// import "echarts/lib/chart/pie";
// import "echarts/lib/chart/map";

import {callApi} from 'app/utils'
import 'echarts/map/js/china.js';

export default class extends PureComponent {
  state = {
	platformData:{},
	splitList: [
		{start: 0,end:0,color:'#f00'},
		{start: 1,end:2,color:'#d95850'},
		{start: 2,end:3,color:'#f46d43'},
		{start: 3,end:4,color:'#fdae61'},
		{start: 4,end:5,color:'#dee08b'},
		{start: 5,end:5,color:'#e6f598'},
		{start: 6,end:6,color:'#abdda4'},
		{start: 7,end:7,color:'#66c2a5'},
		{start: 8,end:8,color:'#3288bd'},
		{start: 9,end:9,color:'#5e4fa2'},
	],
	year:''
  };
  
componentWillMount(){
    
}

componentDidMount() {
     // investAmountData1 =data['loanerInfos']['loanAccountDistributedInfos'];
    // investAmountData2 =data['loanerInfos']['ageDistributedInfos'];
    // investAmountData3 =data['loanerInfos']['areaDistributedInfos'];
    // investAmountData4 =data['loanerInfos']['genderDistributedInfos'];
    // investAmountData5 =data['projectInfo'];
    let that = this
	let str 
	console.log(this.props)
	this.setState({year:this.props.location.query.flag.substring(this.props.location.query.flag.length,this.props.location.query.flag.length-2)})
    callApi(this.props.location.query.flag, {}, "GET","/anxintou",2).then(data0 => {
        console.log(data0)
        this.setState({platformData:data0})
		let myChart6 = echarts.init(document.getElementById("main6"));
		let myChart7 = echarts.init(document.getElementById("main7"));
		let myChart8 = echarts.init(document.getElementById("main8"));
      
        var option6 = {
            legend: {
				orient: 'vertical',
				x: 'right',
				y: 'center',
				right: '0',
				top: '10%',
				align: 'right',
				itemWidth: '12',
				selectedMode: false,
				data:that.investAmountData(data0.userInfo.ageDistributions,0)
			},
			series: [
				{
					name:'访问来源',
					type:'pie',
					silent: true,
					hoverAnimation: false,
					legendHoverLink: false,
					center: ['50%', '50%'],
					radius: ['35%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 12
							},
							formatter: '{d}%'
						}
					},
					labelLine: {
						normal: {
							show: true,
							length:8,
							length2:6
						}
					},
					data: that.investAmountData(data0.userInfo.ageDistributions,1)
				}
			]
		};
		var option7 = {
            legend: {
				orient: 'vertical',
				x: 'right',
				y: 'center',
				right: '0',
				top: '10%',
				align: 'right',
				itemWidth: '12',
				selectedMode: false,
				data:that.investAmountData(data0.investChannel,0)
			},
			series: [
				{
					name:'访问来源',
					type:'pie',
					silent: true,
					hoverAnimation: false,
					legendHoverLink: false,
					center: ['50%', '50%'],
					radius: ['35%', '60%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: true,
							textStyle: {
								fontSize: 12
							},
							formatter: '{d}%'
						}
					},
					labelLine: {
						normal: {
							show: true,
							length:8,
							length2:6
						}
					},
					data: that.investAmountData(data0.investChannel,1)
				}
			]
		};
		var option8 ={
			dataRange: {
				x: 'left',
				y: 'bottom',
				show:false,
				splitList: [
					{start: 0,end:0,color:'#f00'},
					{start: 1,end:2,color:'#d95850'},
					{start: 2,end:3,color:'#f46d43'},
					{start: 3,end:4,color:'#fdae61'},
					{start: 4,end:5,color:'#dee08b'},
					{start: 5,end:5,color:'#e6f598'},
					{start: 6,end:6,color:'#abdda4'},
					{start: 7,end:7,color:'#66c2a5'},
					{start: 8,end:8,color:'#3288bd'},
					{start: 9,end:9,color:'#5e4fa2'},
				],
				color: ['#E0022B', '#E09107', '#A3E00B']
			},
			
			series : [
				{
					type: 'map',
					mapType: 'china',
					roam: false,
					itemStyle:{
						normal:{
							label:{
								show:false,
								textStyle: {
									color: "rgb(249, 249, 249)"
								}
							}
						},
						emphasis:{label:{show:true}}
					},
					data: that.investAmountData2(data0.areaDistributions)
				}
			]
		}
		myChart6.setOption(option6);
		
		myChart7.setOption(option7);

		myChart8.setOption(option8);

  
      })
   


}
renderItem(){
	if(JSON.stringify(this.state.platformData)!='{}'){
		this.state.platformData.areaDistributions.map((item,index)=>{
			return <div>{item.proportion}</div>
		})
	}
	
}
investAmountData2(data,info){
	var res = [];
			for (var i = 0; i < data.length; i++) {
				res.push({
					value: i,
					name: data[i]['group']
				});
			}
			return res;
}

investAmountData(data,info) {
    var res = [];
    if(info ==1){
        for (var i = 0; i < data.length; i++) {
            res.push({
                value: data[i]['count'],
                name: data[i]['group']
            });
        }
        return res;
    }else{
        for (var i = 0; i < data.length; i++) {
            res.push({
                name: data[i]['group']
            });
        }
        return res;
    }
};

dataStr(){
   
    let that = this
    let str 
    let pd = this.state.platformData;
   
	let renderItem = this.renderItem()
	if(JSON.stringify(pd)!='{}'){

	
    return(<div>
        <Flex>
        <Flex.Item className={`${s.title}`}>数据概况</Flex.Item>
    </Flex>
    <div className={`${s.overviewBox}`}>
    <Flex>
        <Flex.Item className={`${s.item} mgr10 mgt10`}>
			<div className={``}>安心投</div>
            <div className={``}>安全运营天数</div>
            <div className={``}><span className={`color1`}>{pd.runningTime}</span>天</div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`}>
			<div className={``}>安心投</div>
            <div className={``}>累计交易金额</div>
            <div className={``}><span className={`color1`}>{pd.totalLoanAmount}</span>元</div>
        </Flex.Item>
    </Flex>
    <Flex>
        <Flex.Item className={`${s.item} mgr10 mgt10`}>
			<div className={``}>安心投</div>
            <div className={``}>累计赚取收益</div>
            <div className={``}><span className={`color1`}>{pd.totalProfit}</span>元</div>
        </Flex.Item>
        <Flex.Item className={`${s.item} mgl10 mgt10`}>
			<div className={``}>安心投</div>
            <div className={``}>累计注册人数</div>
            <div className={``}><span className={`color1`}>{pd.registerCount}</span>位</div>
        </Flex.Item>
    </Flex>
    </div>
    <Flex>
        <Flex.Item className={`${s.title}`}>用户数据</Flex.Item>
    </Flex>
    <div className={`${s.lenderInfoBox}`}>
        <Flex direction="column">
            <Flex.Item className={`${s.item}`}>
                <span>安心投<br/>{this.state.year}月份注册用户</span>
				<span><span className={`color26`}>{pd.userInfo.registerCount}</span>位</span>
            </Flex.Item>
            <Flex.Item className={`${s.item}`}>
				<span>安心投<br/>{this.state.year}月份邀请好友统计</span>
				<span><span className={`color26`}>{pd.userInfo.invitedCount}</span>位</span>
            </Flex.Item>
            
        </Flex>
    </div>
    <Flex>
        <Flex.Item className={`${s.title}`}>用户年龄分布</Flex.Item>
    </Flex>
    <div className={`${s.userAgeBox}`}>
        <Flex direction="column">
			<div className={`${s.tit}`}>用户年龄分布（{this.state.year}月)</div>
            <Flex.Item className={`${s.item}`}>
				<div id="main6" className={`${s.main}`} ></div>
            </Flex.Item>
			<div className={`${s.tit}`} style={{borderTop:'0.01rem solid #ccc'}}>用户之最</div>
            <Flex.Item className={`${s.item}`} style={{height:"1.3rem"}}>
				<Flex.Item className={`${s.itemChild}`}>
					<Flex.Item className={`${s.name}`}>{pd.userInfo.bestUsers[1].name}</Flex.Item>
					<Flex.Item className={`${s.num}`}>{pd.userInfo.bestUsers[1].count}次</Flex.Item>
					<Flex.Item className={`${s.desc}`}>最勤恳投友<br/>出借次数最多</Flex.Item>
				</Flex.Item>
				<Flex.Item  className={`${s.itemChild}`}>
					<Flex.Item className={`${s.name}`}>{pd.userInfo.bestUsers[0].name}</Flex.Item>
					<Flex.Item className={`${s.num}`}>*元</Flex.Item>
					<Flex.Item className={`${s.desc}`}>最日进斗金投友<br/>出借金额最多</Flex.Item>
				</Flex.Item>
				<Flex.Item className={`${s.itemChild}`}>
					<Flex.Item className={`${s.name}`}>{pd.userInfo.bestUsers[2].name}</Flex.Item>
					<Flex.Item className={`${s.num}`}>{pd.userInfo.bestUsers[2].age}岁</Flex.Item>
					<Flex.Item className={`${s.desc}`}>最宝刀不老投友<br/>出借年龄最大</Flex.Item>
				</Flex.Item>
            </Flex.Item>
			<div className={`${s.tit}`}>用户性别分布（{this.state.year}月)</div>
            <Flex.Item className={`${s.item}`} style={{height:"1.3rem"}}>
					<Flex.Item className={`${s.nan} flex1`}>男</Flex.Item>
					<Flex.Item className={`${s.process} flex8`}>
						<Flex.Item className={`${s.processNan}`} style={{ width: `${pd.userInfo.sexAmountDistributions[0].proportion}`}}>
							男性占比{pd.userInfo.sexAmountDistributions[0].proportion}
						</Flex.Item>
						<Flex.Item  className={`${s.processNv}`} style={{ width: `${pd.userInfo.sexAmountDistributions[1].proportion}`}}>
							女性占比{pd.userInfo.sexAmountDistributions[1].proportion}
						</Flex.Item>
					</Flex.Item>
					<Flex.Item className={`${s.nv} flex1`}>女</Flex.Item>
            </Flex.Item>
        </Flex>
    </div>
	<Flex>
        <Flex.Item className={`${s.title}`}>出借渠道</Flex.Item>
    </Flex>
    <div className={`${s.userAgeBox}`}>
        <Flex direction="column">
			<div className={`${s.tit}`}>出借渠道分布占比（{this.state.year}月)</div>
            <Flex.Item className={`${s.item}`}>
				<div id="main7" className={`${s.main}`} ></div>
            </Flex.Item>
        </Flex>
    </div>


	<Flex>
        <Flex.Item className={`${s.title}`}>用户区域分布</Flex.Item>
    </Flex>
    <div className={`${s.userAgeBox}`}>
        <Flex direction="column">

			<div className={`${s.tit}`}>出借次数区域分布占比（{this.state.year}月)</div>
			<div className={`${s.renderItemBox}`}>
			{JSON.stringify(this.state.platformData)!='{}'?that.state.platformData.areaDistributions.map((item,index)=>{
				return <div key={index} className={`${s.renderItem}`}><span  className={`${s.name} flex1`}>{item.group}</span><span 
				style={{
                	background: `linear-gradient(to right, ${that.state.splitList[index].color} ${item.proportion}, rgb(255, 255, 255) 0px,#fff ${item.proportion})`
              	}}  
			  className={`${s.center} flex8`}></span><span  className={`${s.num} flex1`}>{item.count}次</span></div>
			}):null}
			</div>
			
            <Flex.Item className={`${s.item}`}>
				<div id="main8" className={`${s.main}`} ></div>
            </Flex.Item>
        </Flex>
    </div>
</div>)
	}
}

render() {
   let str = this.dataStr()
	
    return (
      <div className={`${s.platformDataBox}`}>
	  	<Flex style={{background:'#fff',height:'1rem',width:'100%',paddingTop:'0.2rem'}}  direction="column" align="center" justify="center"><Flex.Item>2018年安心投</Flex.Item><Flex.Item>{this.state.year}月运营报告</Flex.Item></Flex>
        {str}
		
      </div>
    );
  }

}
